<template>
    <div>
        <div>
            <el-col :span="6">
                <el-input v-model="user_id" placeholder="用户ID" suffix-icon="el-icon-search"></el-input>
            </el-col>
            <el-col :span="6" class="left-mar">
                <el-date-picker v-model="start_time" placeholder="请选择日期" prefix-icon="el-icon-date" type="date" value-format="timestamp">
                </el-date-picker>
            </el-col>
            <el-button type="info" round class="left-mar" 
              @click="submit"
              v-loading.fullscreen.lock="screen_loading">确认</el-button>
        </div>
        <div v-if="fetched">
            <h3>查询用户：{{ fetched.nick_name }}&nbsp;&nbsp;&nbsp;&nbsp;查询时间：{{ start }}</h3>
            <kpi-data-list v-bind:data="fetched" v-bind:key="fetched.id"></kpi-data-list>
        </div>
    </div>
</template>

<script>
import KpiDataList from '@/components/base/KpiDataList'

export default {
    name: 'UserKPI',
    components: { KpiDataList },
    data: function() {
        return {
            user_id: '',
            start_time: '',
            headers: {headers:{"Content-Type": "application/x-www-form-urlencoded; charset=UTF-8"}},
            fetched: '',
            screen_loading: false,
        }
    },
    created: function() {
        this.fetchData()
    },
    computed: {
        start: function() {
            let start_date = new Date(this.start_time)
            return start_date.toLocaleDateString()
        }
    },
    methods: {
        submit: function() {
            let params = {user_id: this.user_id, start_time: this.start_time}
            let that = this
            that.screen_loading = true
            this.$axios.post("/v1/query", params, that.headers)
              .then(response => {
                //   console.log(response.data)
                  that.fetched = response.data
                  that.screen_loading = false
              })
        },
        fetchData: function() {
            // this.user_id = this.$route.params.user_id
            this.user_id = this.$route.query.user_id
            this.start_time = this.toTimestamp()
            if (this.user_id) {
                this.submit()
            }
        },
        toTimestamp: function() {
            let t = new Date()
            return Date.parse(t.toLocaleDateString())
        }
    },
}
</script>

<style>
.left-mar {
    margin-left: 10px;
}
</style>

